<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <title>Document</title>
</head><!--219970615黄瑞-->
<style>
table {
  border-collapse: collapse; /* 将相邻单元格的边框合并 */
  width: 100%;
}

/* 给表头和表尾的单元格添加背景色和字体颜色 */
th, td {
  border-top: 1px solid rgb(204, 201, 201); /* 只显示上边框，去掉左右边框 */
  border-bottom: 1px solid rgb(204, 201, 201); /* 只显示下边框，去掉左右边框 */
  padding: 8px;
}
/* 将表格第一行的上边框设为透明 */
tr:first-child td {
  border-top: none;
}
/* 给表头添加背景色和居中对齐 */
th {
  background-color: #f2f2f2;
  text-align: center;
}
button {
  padding: 5px 10px;
  color: white;
  cursor: pointer;
  border: none;
  background-color: transparent; /* 将按钮的背景色设为透明 */
}

/* 按钮悬停时改变背景色 */
button:hover {
  background-color:rgb(150, 148, 148);
}
/* 图片的样式 */
img {
  display: block;
  margin: auto; /* 图片居中显示 */
}
/* 包裹元素样式 */
.quantity-wrapper {
  border: 1px solid #ccc; /* 添加边框 */
  padding: 2px; /* 调整内边距 */
  display: inline-block; /* 让元素变成行内块级元素，以便边框包裹内容 */
}
.size{
  font-size: 15px;
}
.size:hover{
  background-color: red;
  border-radius: 20px;
}
.butoom {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 实现垂直居中 */
  background-color: rgb(255, 251, 251);
}

.butoom p {
  margin: 0; /* 清除段落标签的默认外边距 */
}
p.total {
  margin-left: 1400px; /* 设置合适的距离值 */
}
</style>
<body><!--219970615黄瑞-->
  <div id="app">
    <table>
      <tr>
        <td>
          <!-- checked: 用于设定勾选状态 -->
          <input type="checkbox" v-model="checkAll" @change="selectAll"> 全选
        </td>
        <td></td>
        <td>商品名</td>
        <td>单价</td>
        <td>数量</td>
        <td>小计</td>
        <td>操作</td>
      </tr>
      <tbody>
        <tr v-for="( good, i) in  goods" :key="i">
          <td>
            <!-- 推荐单标签闭合, 以前版本会报错, 如果不闭合 -->
            <input type="checkbox" v-model="good.checked">
          </td>
          <td><img :src=" good.img" alt="商品图片" style="width: 100px; height: auto;"></td>
          <td>{{ good.name }}</td>
          <td>{{ good.price }}元</td>
          <td>
            <div class="quantity-wrapper">
            <button @click="decreaseCount(good)" :disabled="good.count == 1"style="color: gray" >-</button>
            <span>{{ good.count }}</span>
            <button @click="increaseCount(good)"style="color: gray" >+</button>
          </div>
          </td>
          <td style="color: rgb(232, 113, 70);">{{good.price * good.count }}元</td>
          <td><button style="color: gray;"class="size"@click="deleteAllSelectedGoods()">x</button></td>
        </tr>
      </tbody>
    </table>
    <div class="butoom">
      <p>继续购物&nbsp;|&nbsp;已选择<span style="color: orangered;">{{selectedCount }}</span>件</p>
    <p class="total" style="color: rgb(230, 120, 9);">合计:<span style="font-size: 40px;">{{ getTotal }}</span>元</p>
    <button style="background-color: orangered;height: 50px;width: 200px;;">去结算</button>
  </div>
  <script>
    const app = Vue.createApp({//<!--219970615黄瑞-->
      data() {
        return {
         goods: [
            { img: 'img/1.webp', name: '日常元素抗菌软毛小方刷 彩色', price: 24, count: 1, checked: false },
            { img: 'img/2.webp', name: '日常元素防蛀护龈益生菌牙膏', price: 12, count: 4, checked: false },
            { img: 'img/3.webp', name: '小米自带线充电宝 浅咖色', price: 99, count: 10, checked: false },
          ],
          checkAll: false
        }
      },
      // 事件触发的方法: methods
      methods: {
        deleteGood(good) {
          if (confirm('确定要删除吗？')) {
          this.goods.splice(good, 1);
        }
  },
     deleteAllSelectedGoods() {
          if (confirm('确定要删除的商品吗？')) {
            let selectedGoods = this.goods.filter(good => good.checked);
            selectedGoods.forEach(good => {
              this.goods.splice(this.goods.indexOf(good), 1);
            });
          }
        },
        // 如果事件在调用时,没写(), 则默认的参数1 是事件参数
        selectAll() {
          // 读取全选框的值, 赋值给每个商品的checked属性
          this. goods.forEach(
            good => (good.checked = this.checkAll)
          )
  },
        increaseCount(good) {
          good.count++;
        },
        decreaseCount(good) {
          if (good.count > 1) {
            good.count--;
          }
        },
      },
      computed: {
        //判断是否全选: 每一个的checked都是true
        checkAllStatus() {
          return this.goods.every(good => good.checked)
        },
        selectedCount() {
            return this.goods.reduce((sum, good) => {
            return sum + (good.checked ? 1 : 0);
        }, 0);
  },
        getTotal() {
          // reduce: 让数组元素合并出一个值
          var a = this.goods.reduce((sum, good) => {
            const { price, count, checked } = good
            // *true 相当于 *1
            // *false 相当于 *0 = 0
            // 没有勾选, 就是 sum + 0, 即不累加
            return sum + price * count * (checked ? 1 : 0);
          }, 0)
          return a
        },
      },
    });
    app.mount('#app');
  </script>
</body>
</html>